import "dayjs/locale/zh-cn";
import React, { useMemo, useState } from "react";
import { Rule } from "rc-field-form/es/interface";
import { Checkbox, Form, Input, Select, Switch, Radio, DatePicker } from "antd";
import { FormattedMessage, useIntl } from "react-intl";
import lodash from 'lodash';
import TextArea from "antd/es/input/TextArea";
import locale from 'antd/es/date-picker/locale/zh_CN';
import UploadFile from "./Upload";
import styles from "./styles.module.scss";
import RegionPicker from "../../Component/RegionPicker";
import RichText from "./RichText";
import JSCity from "../RegionPicker/JSCity";
import { Cover } from "@/pages/Admin/Component/Cover";

export interface IEditField {
    type: "Input"|"TextArea"|"Select"|"RadioGroup"|"Date"|"RichText"|"Switch"|"Upload"|"Region"|"JSCity"|"Custom"|"Cover"|"CheckGroup";
    name: string;
    label: string;
    required?: boolean;
    rules?: Rule[];
    props?: any;
    buildProps?: (data: any) => any;
    placeholder?: string;
    format?: (val: any) => any;
    Component?: React.ComponentType<any>;
    fullColumn?: boolean;
    visible?: (data: any) => boolean;
}

export const Fields = ({ fields, data, form, disabled }: { fields: IEditField[], data: any, form: any, disabled?: boolean;}) => {
    const [ fieldsMap ] = useState(fields);
    const requireRules = useMemo(() => ([{ required: true, message: <FormattedMessage id="admin.pages.article.formItem.required"/>}]), []);
    const intl = useIntl();
    const selectPlaceHolder = useMemo(() => intl.formatMessage({ id: "admin.layout.pleaseSelect", defaultMessage: "Please select" }), []);
    return (<>
        {
            fieldsMap.map((item, index) => {
                const itemProps = {
                    placeholder: item.placeholder,
                    ...(item.props || {}),
                    ...(typeof item.buildProps === "function" ? item.buildProps(data) || {} : {}),
                    form,
                    name: item.name
                };
                const itemOptions = lodash.get(itemProps, "options", []);
                const defaultClass: string = item.type === "RichText" || item.fullColumn ? styles.articalEditorFormItem : "";
                const formItemRules = item.required ? item.rules || requireRules : [];
                const CustomComponent = item.Component;
                const visible = typeof item.visible === "function" ? item.visible(form.getFieldsValue()) : true;
                if(visible) {
                    return <Form.Item
                        label={<FormattedMessage id={item.label} defaultMessage={item.label} />}
                        rules={formItemRules}
                        name={item.name}
                        required={item.required}
                        key={index}
                        rootClassName={defaultClass}
                    >
                        { item.type === "Input" && <Input {...itemProps}/> }
                        { item.type === "Select" && <Select {...itemProps} placeholder={item.placeholder || selectPlaceHolder} options={item.props?.options || []} /> }
                        { item.type === "RadioGroup" && <Radio.Group>
                            {
                                itemOptions.map((item: any, index: number) => {
                                    return (<Radio key={index} value={item.value}><span>{item.label}</span></Radio>)
                                })
                            }
                        </Radio.Group>}
                        { item.type === "Date" && <DatePicker locale={locale} {...itemProps} /> }
                        { item.type === "TextArea" && <TextArea {...itemProps} /> }
                        { item.type === "Switch" && <Switch {...itemProps}
                            checkedChildren={itemProps.checkedText || <FormattedMessage id="admin.pages.menus.edit.status.enable" />}
                            unCheckedChildren={itemProps.unCheckedText || <FormattedMessage id="admin.pages.menus.edit.status.disable" />}
                        /> }
                        { item.type === "Upload" && <UploadFile {...itemProps} /> }
                        { item.type === "RichText" && (<RichText {...itemProps} />)}
                        { item.type === "Region" && <RegionPicker {...itemProps}/>}
                        { item.type === "Custom" && CustomComponent && <CustomComponent {...itemProps} disabled={disabled}/> }
                        { item.type === "JSCity" && <JSCity {...itemProps}/> }
                        { item.type === "Cover" && <Cover {...itemProps}/> }
                        { item.type === "CheckGroup" && <Checkbox.Group {...itemProps} /> }
                    </Form.Item>
                }
            })
        }
    </>);
};
